<template>
	<view class="content">
		<uni-section class="sections flex justify-between" title="搭子类型" type="line">
			<view class="sections-input" @click="$refs.selectPopup.open()">
				{{info.type ? info.type :'请选择'}}
			</view>
			<image class="sections-img" src="/static/image/right.png" mode=""></image>
		</uni-section>
		<uni-section class="sections flex justify-between" title="搭子需求" type="line">
			<view class="sections-input" @click="$refs.selectXqPopup.open()">
				{{info.demand ? info.demand :'请选择'}}
			</view>
			<image class="sections-img" src="/static/image/right.png" mode=""></image>
		</uni-section>
		<uni-section class="sections flex justify-between" title="活动标题" type="line">
			<input class="sections-input" v-model="info.title" type="text" placeholder="请输入活动标题">
		</uni-section>
		<uni-section class="sections flex justify-between" title="开始时间" type="line">
			<uni-datetime-picker placeholder='请选择开始时间' style="margin-right: 25rpx;font-size: 24rpx;"
				v-model="info.start_time" :border="false" />
			<image class="sections-img" src="/static/image/right.png" mode=""></image>
		</uni-section>
		<uni-section class="sections flex justify-between" title="报名截止时间" type="line">
			<uni-datetime-picker placeholder='请选择报名截止时间' style="margin-right: 25rpx;font-size: 24rpx;"
				v-model="info.end_time" :border="false" />
			<image class="sections-img" src="/static/image/right.png" mode=""></image>
		</uni-section>
		<uni-section class="sections flex justify-between" title="活动地点" type="line">
			<input class="sections-input" v-model="info.address" type="text" placeholder="请输入活动地点">
			<image @click="getAddress" class="sections-img" src="/static/image/right.png" mode=""></image>
		</uni-section>
		<uni-section class="sections flex justify-between" title="活动价格" type="line">
			<view class="sections-input" @click="$refs.selectPricePopup.open()">
				{{info.price ? info.price :'请选择'}}
			</view>
			<image class="sections-img" src="/static/image/right.png" mode=""></image>
		</uni-section>
		<uni-section class="sections flex justify-between" title="所需人数" type="line">
			<input class="sections-input" v-model="info.number" type="text" placeholder="请输入所需人数">
		</uni-section>
		<view style="background-color: #fff;padding: 20rpx;">
			<view style="color: #000000;font-weight: 500;">
				活动描述
			</view>
			<textarea
				style="margin-top:20rpx;padding: 20rpx; width: 100%;height: 340rpx;background: #F8F8F8;border-radius: 16rpx;"
				v-model="info.content" placeholder="请输入活动描述" name="" id="" cols="30" rows="10"></textarea>
		</view>
		<view class="imgs-box">
			<view class="imgs-box-title">
				生活照（最多9张）
			</view>
			<!-- <uni-section class="sections" title="生活照（最多9张）" type="line"> -->
			<view class="imgs">
				<view class="img-item-item" v-for="(item,index) in addImgLists" :key="index">
					<image class="img" :src="item" mode="aspectFill"></image>
					<image class="del-img" src="/static/index/delete-picture.png" @tap="deletImg(index)" mode="">
					</image>
				</view>
				<view class="img-item-item" v-if="addImgLists.length < 9">
					<image class="img" src="/static/image/find/upload.png" mode="" @tap="choiceImgs()"></image>
				</view>
			</view>
			<!-- </uni-section> -->
		</view>
		<view class="btn" @click="submit">
			立即发布
		</view>
		<!-- 搭子类型 -->
		<uni-popup ref="selectPopup" :mask-click="true" type="bottom">
			<view class="selectPopup">
				<view class="selectPopup-top flex">
					<view class="title">搭子类型</view>
					<image @tap="$refs.selectPopup.close()" src="/static/image/activity/cancle.png" mode=""></image>
				</view>
				<view class="sections-list flex flex-wrap">
					<view class="sections-item" :class="{ active: item.isChecked == true }" @tap="changeChecked(item)"
						v-for="(item,index) in labelItem" :key="index">
						{{item.name}}
					</view>
				</view>
				<!-- <view class="selectPopup-title">自定义</view>
				<input class="selectPopup-input" v-model="addlabs" type="text" placeholder="请输入标签名称"> -->
				<view class="selectPopup-btn" @click="addLxLable">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 搭子需求 -->
		<uni-popup ref="selectXqPopup" :mask-click="true" type="bottom">
			<view class="selectPopup">
				<view class="selectPopup-top flex">
					<view class="title">搭子需求</view>
					<image @tap="$refs.selectXqPopup.close()" src="/static/image/activity/cancle.png" mode=""></image>
				</view>
				<view class="sections-list flex flex-wrap">
					<view class="sections-item" :class="{ active: item.isChecked == true }" @tap="changeXqChecked(item)"
						v-for="(item,index) in labelXqItem" :key="index">
						{{item.name}}
					</view>
				</view>
				<!-- 	<view class="selectPopup-title">自定义</view>
				<input class="selectPopup-input" v-model="addlabs" type="text" placeholder="请输入标签名称"> -->
				<view class="selectPopup-btn" @click="addxQLable">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 活动价格 -->
		<uni-popup ref="selectPricePopup" :mask-click="true" type="bottom">
			<view class="selectPopup">
				<view class="selectPopup-top flex">
					<view class="title">活动价格</view>
					<image @tap="$refs.selectPricePopup.close()" src="/static/image/activity/cancle.png" mode="">
					</image>
				</view>
				<view class="selectPopup-title">价格区间</view>
				<view class="price-box flex">
					<input type="number" placeholder="请输入最低价" v-model="info.min_price">
					<view class="price-box-text">至</view>
					<input type="number" placeholder="请输入最高价" v-model="info.max_price">
				</view>
				<view class="selectPopup-title">一口价</view>
				<input class="selectPopup-input" type="number" v-model="info.price" placeholder="请输入您的活动价格">
				<view class="selectPopup-tip">提示：价格区间和一口价不能同时选中；</view>
				<view class="selectPopup-btn" @click="addLable">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 遮罩层 -->
		<view class="masks" v-if="showMask"></view>
		<!-- 删除提示弹框 -->
		<uni-popup ref="popups">
			<view class="popups">
				<view class="title">是否删除该照片?</view>
				<view class="button">
					<view class="bottom" @tap="countermand">取消</view>
					<view class="bottom" @tap="wipeCache">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					type: '', //搭子类型
					demand: '', //搭子需求
					title: '', //标题
					start_time: '', //开始时间
					end_time: '', //结束时间
					address: '', //活动地点
					price: '', //活动价格
					min_price: '', //最低价
					max_price: '', //最高价
					number: '', //活动人数
					content: '', //描述
					url: '',
					url_type: 'image', //image=图片,video=视频
				}, //数据
				addlabs: '', // 添加的标签
				video: '',
				showMask: false, //上传视频是否展示遮罩层
				addImgLists: [], //上传图片
				isVideos: true, //视频与图片切换
				pngitem: '', //删除的某个图片
				labelItem: [],
				lxLabel: [], //选中的类型
				labelXqItem: [],
				xqLabel: [], //选中的需求
			}
		},
		onShow() {
			this.initXq();
		},
		methods: {
			// 获取当前位置
			getAddress() {
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			initXq() {
				// 1:搭子类型:,2:搭子需求
				this.$http.getDzListXq({
					type: 1
				}).then(res => {
					if (res.code == '1') {
						this.labelItem = [];
						res.data.map(item => {
							let obj = {
								name: item,
								isChecked: false
							}
							this.labelItem.push(obj)
						})
					}
				})
				this.$http.getDzListXq({
					type: 2
				}).then(res => {
					if (res.code == '1') {
						this.labelXqItem = [];
						res.data.map(item => {
							let objXq = {
								name: item,
								isChecked: false
							}
							this.labelXqItem.push(objXq)
						})
					}
				})
			},
			// 提交
			submit() {
				console.log(this.addImgLists,'this.addImgLists')
				this.info.url = this.addImgLists.toString();
				// 
				// return
				if (!this.info.type) return this.$helper.toast('none', '请选择搭子类型');
				if (!this.info.demand) return this.$helper.toast('none', '请选择搭子需求');
				if (!this.info.title) return this.$helper.toast('none', '请输入标题');
				if (!this.info.start_time) return this.$helper.toast('none', '请选择开始时间');
				if (!this.info.end_time) return this.$helper.toast('none', '请选择结束时间');
				if (!this.info.address) return this.$helper.toast('none', '请选择或输入地址');
				if (!this.info.price) return this.$helper.toast('none', '请输入活动价格');
				if (this.addImgLists.length < 1) return this.$helper.toast('none', '请上传活动图片');
				this.$http.creatDzLisBm(this.info).then(res => {
					if (res.code == '1') {
						this.$helper.to('/pages/tabBar/activity/activeSuccess/activeSuccess?title='+'发布成功'+'&leftBtn='+'');
					}
				})
			},
			// 删除视频
			deltVideo() {
				this.video = '';
				this.isVideos = true;
			},
			// 类型选择
			changeChecked(item) {
				item.isChecked = !item.isChecked;
				this.labelItem.map(ite => {
					if (ite.isChecked) {
						this.lxLabel.push(ite.name);
						this.lxLabel = this.lxLabel.filter((reptitem, index, array) => {
							return array.indexOf(reptitem) === index
						})
					} else {
						// 取消选中时从标签数组中移除
						const index = this.lxLabel.indexOf(ite.name);
						if (index > -1) {
							this.lxLabel.splice(index, 1);
						}
					}
				})
			},
			addLxLable() {
				this.info.type = this.lxLabel.toString();
				this.$refs.selectPopup.close()
			},
			// 需求选中
			changeXqChecked(item) {
				item.isChecked = !item.isChecked;
				this.labelXqItem.map(ite => {
					if (ite.isChecked) {
						this.xqLabel.push(ite.name);
						this.xqLabel = this.xqLabel.filter((reptitem, index, array) => {
							return array.indexOf(reptitem) === index
						})
					} else {
						// 取消选中时从标签数组中移除
						const index = this.xqLabel.indexOf(ite.name);
						if (index > -1) {
							this.xqLabel.splice(index, 1);
						}
					}
				})
			},
			addxQLable() {
				this.$refs.selectXqPopup.close()
				this.info.demand = this.xqLabel.toString();
			},
			// 价格
			addLable() {
				this.$refs.selectPricePopup.close()
			},
			// 上传视频
			choiceVideos() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['album', 'camera'],
					compressed: true,
					maxDuration: 15,
					success: res => {
						this.showMask = true;
						let tempFilePath = [res.tempFilePath];
						uni.uploadFile({
							url: 'http://120.55.58.244:9097/system/oss/upload',
							file: tempFilePath[0],
							name: 'file',
							header: {
								Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
							},
							success: resp => {
								let tempResult = JSON.parse(resp.data);
								if (tempResult.code == 200) {
									this.showMask = false;
									this.isVideos = false;
									this.video = tempResult.data.url
								} else {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: tempResult.msg
									});
								}
							}
						});
					}
				});
			},
			// 关闭弹窗
			countermand() {
				this.$refs.popups.close();
			},
			//上传图片
			choiceImgs() {
				let isUpload = true;
				let count = 9;
				isUpload = this.addImgLists.length < 9;
				count = 9 - this.addImgLists.length;
				if (isUpload) {
					uni.chooseImage({
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera', 'album'], //从相册选择
						count: count,
						success: res => {
							this.isUploadImg = true;
							uni.showLoading({
								title: '图片处理中...',
								mask: true
							});
							this.uploadimg({
								path: res.tempFilePaths,
								i: 0,
								success: 0,
								fail: 0
							});
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '最多只能上传九张图片',
						duration: 2000
					});
				}
			},
			//多张图片上传
			uploadimg(data) {
				let that = this;
				let i = data.i;
				let success = data.success;
				let fail = data.fail;

				if (i >= data.path.length) {
					// 所有图片都已上传完成
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: `上传完成，成功${success}张，失败${fail}张`
					});
					return;
				}

				uni.showLoading({
					title: '正在上传第' + (i + 1) + '/' + data.path.length,
					mask: true
				});

				uni.uploadFile({
					url: this.$http.baseUrl + '64803624da6de',
					filePath: data.path[i],
					name: 'file',
					success: resp => {
						uni.hideLoading();
						let tempResult = JSON.parse(resp.data);
						if (tempResult.code == '1') {
							success++;
							this.addImgLists.push(tempResult.data.url);
						} else {
							fail++;
							uni.showToast({
								icon: 'none',
								title: `第${i + 1}张图片上传失败: ${tempResult.msg}`
							});
						}
					},
					fail: err => {
						fail++;
						console.log('上传失败:', i + 1, err);
						uni.showToast({
							icon: 'none',
							title: `第${i + 1}张图片上传失败`
						});
					},
					complete: () => {
						// 继续上传下一张
						that.uploadimg({
							path: data.path,
							i: i + 1,
							success: success,
							fail: fail
						});
					}
				});
			},
			// 删除图片
			deletImg(pngitem) {
				this.$refs.popups.open();
				this.pngitem = pngitem
			},
			wipeCache() {
				this.$refs.popups.close();
				this.addImgLists.splice(this.pngitem, 1); //分享后的图片
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 30rpx;
		background: #fff;
	}

	.sections {
		border-bottom: 1rpx solid #EEF2FF;
	}

	::v-deep .uni-section-content {
		display: flex !important;
		align-items: center;
		width: 500rpx;
		text-align: right;
	}

	.sections-input {
		width: 460rpx;
		height: 64rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: grey;
		text-align: right;
		// padding-right: 30rpx;
		margin-top: 10rpx;
		line-height: 60rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 显示省略符号来代表被修剪的文本 */
	}

	.sections-img {
		width: 20rpx;
		height: 20rpx;
		margin: 0 10rpx;
	}

	.attention {
		font-size: 24rpx;
		font-weight: 400;
		color: #FF0000;
		margin-left: 20rpx;
	}

	.sections-list {
		// width: 686rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.sections-item {
		min-width: 120rpx;
		background: #F8F8F8;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
		padding: 10rpx;
		margin: 0 20rpx 8rpx 0;
		color: #999999;

		&.active {
			border: 1rpx solid #000;
			background: #F8F8F8;
			color: #000;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 15rpx;
		}

		text {
			color: #B778F6;
		}
	}

	// 上传图片或视频
	.upload-video {
		text-align: center;
		width: 686rpx;
		height: 386rpx;
		border: 1rpx solid #33333B;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;

		.noUpdata {
			.upload {
				width: 46rpx;
				height: 46rpx;
				margin: 130rpx 0 40rpx 0;
			}

			.reminder {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44rpx;
				color: #6C717A;
				opacity: 1;
			}
		}

		// 视频
		.videos {
			width: 343px;
			height: 193px;
			position: relative;
		}

		.deltVideo {
			width: 32rpx;
			height: 32rpx;
			z-index: 999;
			top: 2%;
			left: 94%;
			position: absolute;
		}

		.uploads {
			width: 686rpx;
			height: 386rpx;
		}

		.uploaded {
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

	}

	.btn {
		width: 686rpx;
		height: 88rpx;
		// background: #999;
		background: #000;
		color: #FEC92F;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		border-radius: 50rpx;
	}

	.selectPopup {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;

		.selectPopup-top {
			font-size: 32rpx;
			font-weight: 500;
			color: #150E33;

			.title {
				margin: 0 auto;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 10rpx;
			}
		}

		.selectPopup-tip {
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			margin-top: 16rpx;
		}

		.selectPopup-title {
			font-size: 30rpx;
			color: #000000;
			margin: 20rpx 0 20rpx 20rpx;
		}

		.price-box {
			input {
				width: 222rpx;
				height: 60rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #B5BFDA;
				padding-left: 10rpx;
			}

			.price-box-text {
				font-size: 24rpx;
				color: #000000;
				margin: 10rpx 20rpx 0 20rpx;
			}
		}

		.selectPopup-input {
			width: 690rpx;
			height: 76rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			margin: 0 auto;
			font-size: 28rpx;
			font-weight: 400;
			color: #B5BFDA;
			// margin: 30rpx;
		}

		.selectPopup-btn {
			width: 690rpx;
			height: 90rpx;
			background: #000;
			color: #FEC92F;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			margin: 0 auto;
			margin-top: 60rpx;
			border-radius: 50rpx;
		}
	}
	.imgs-box{
		padding: 20rpx;
	}
	// 上传图片
	::v-deep .imgs {
		width: 100% !important;
		margin: 0 auto;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: wrap;

		.img-item-item {
			width: 200rpx;
			height: 200rpx;
			margin-left: 43rpx;
			margin-bottom: 43rpx;
			flex-shrink: 0;
			position: relative;

			&:nth-of-type(3n+1) {
				margin-left: 0;
			}

			.img {
				display: block;
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 1;
			}

			.del-img {
				display: block;
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 12rpx;
				right: 10rpx;
				z-index: 99;
			}
		}
	}

	// 删除提示弹框
	.popups {
		width: 540rpx;
		height: 281rpx;
		background: #fff;
		opacity: 1;
		border-radius: 24rpx;

		.title {
			height: 192rpx;
			line-height: 192rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000;
			opacity: 1;
		}

		.button {
			border-top: 1rpx solid #ddd;
			display: flex;

			.bottom {
				width: 50%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000;
				opacity: 1;
			}

			.bottom:first-child {
				border-right: 1rpx solid #ddd;
			}

			.bottom:hover {
				color: #4693FE;
			}
		}
	}
</style>